<template>
  <section class="login_container">
    <section class="card_container" :style="{ transform: `rotateY(${deg}deg)` }">
      <article class="title">{{}}</article>
      <section class="center_box">
        <MyInput v-model="value" title="用户名"></MyInput>
        <MyInput v-model="value" title="密码" type="password"></MyInput>
        <section class="bottom_buttons">
          <MyButton @click="deg = 180">去注册</MyButton>
          <MyButton @click="goHome">登录</MyButton>
        </section>
      </section>
      <section class="center_box login">
        <MyInput v-model="value" title="用户名"></MyInput>
        <MyInput v-model="value" title="密码" type="password"></MyInput>
        <section class="bottom_buttons">
          <MyButton @click="deg = 0">去登录</MyButton>
          <MyButton @click="login">注册</MyButton>
        </section>
      </section>
    </section>
  </section>
</template>

<script setup lang="ts">
import MyButton from '@/components/my-button.vue';
import MyInput from '@/components/my-input.vue';

import { computed, ref } from 'vue';
const router = useRouter();
const value = ref('');
const deg = ref(0);

const title = computed;

function login() {
  console.log('%c 🥒 login: ', 'font-size:20px;background-color: #FCA650;color:#fff;');
}
function goHome() {
  router.push({
    name: 'home'
  });
}
</script>

<style lang="less" scoped>
.card_container {
  position: relative;
  // background-color: #fff;
  padding: 16px;
  width: 300px;
  height: 500px;
  border-radius: 16px;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.1), -3px -3px 3px 3px rgba(0, 0, 0, 0.1),
    -3px -3px 3px 3px rgba(0, 0, 0, 0.1), 3px 3px 3px 3px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.5s;

  .center_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    backface-visibility: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    padding: 16px;
    .bottom_buttons {
      display: flex;
      justify-content: space-between;
    }
  }
  .login {
    transform: rotateY(-180deg);
  }
}
</style>
<style lang="less" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0.2)),
    radial-gradient(closest-side, rgba(34, 29, 114, 1), rgba(0, 211, 244, 0.2)),
    radial-gradient(closest-side, rgba(70, 117, 132, 1), rgba(233, 197, 148, 0.2)),
    radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(255, 235, 62, 0.2)),
    radial-gradient(closest-side, rgba(44, 111, 133, 1), rgba(19, 164, 255, 0.2));
  background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
  background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  // animation: 10s movement linear infinite;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login_container::after {
  content: '';
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(200px);
  z-index: -1;
}
@keyframes movement {
  0%,
  100% {
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax,
      50vmax 50vmax;
  }
  25% {
    background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax;
    background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax,
      40vmax 60vmax;
  }
  50% {
    background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax;
    background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax;
  }
  75% {
    background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax;
    background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax,
      40vmax 60vmax;
  }
}
</style>
